<template>
	<div class="c-width100 c-height100">
		<el-form v-loading="formLoading" v-if="authority" class="form-container" :model="postForm" ref="postForm" label-width="300px" label-position="right">  
      <el-form-item label="是否需要绑定手机号：">
        <el-radio v-model="postForm.enableBindPhoneInAll" :label=1>开通</el-radio>
        <el-radio v-model="postForm.enableBindPhoneInAll" :label=0>关闭</el-radio>
      </el-form-item>
      <el-form-item label="升级会员是否需要绑定手机号："  v-show="postForm.enableBindPhoneInAll">
        <el-radio v-model="postForm.enableBindPhone" :label=1>开通</el-radio>
        <el-radio v-model="postForm.enableBindPhone" :label=0>关闭</el-radio>
      </el-form-item>
      <el-form-item label="课程/专栏购买、观看前是否需要绑定手机号：" v-show="postForm.enableBindPhoneInAll">
        <el-radio v-model="postForm.enableBindPhoneInCourse" :label=1>开通</el-radio>
        <el-radio v-model="postForm.enableBindPhoneInCourse" :label=0>关闭</el-radio>
      </el-form-item>
     
      <el-form-item label="社群购买、进入前是否需要绑定手机号：" v-show="postForm.enableBindPhoneInAll">
        <el-radio v-model="postForm.enableBindPhoneInSocial" :label=1>开通</el-radio>
        <el-radio v-model="postForm.enableBindPhoneInSocial" :label=0>关闭</el-radio>
      </el-form-item>
      <el-form-item label="测评购买、测试前是否需要绑定手机号：" v-show="postForm.enableBindPhoneInAll">
        <el-radio v-model="postForm.enableBindPhoneInExam" :label=1>开通</el-radio>
        <el-radio v-model="postForm.enableBindPhoneInExam" :label=0>关闭</el-radio>
      </el-form-item>
      <el-form-item label="资料购买、下载前是否需要绑定手机号：" v-show="postForm.enableBindPhoneInAll">
        <el-radio v-model="postForm.enableBindPhoneInDatum" :label=1>开通</el-radio>
        <el-radio v-model="postForm.enableBindPhoneInDatum" :label=0>关闭</el-radio>
      </el-form-item>
      <el-form-item label="活动报名前是否需要绑定手机号：" v-show="postForm.enableBindPhoneInAll">
        <el-radio v-model="postForm.enableBindPhoneInActivity" :label=1>开通</el-radio>
        <el-radio v-model="postForm.enableBindPhoneInActivity" :label=0>关闭</el-radio>
      </el-form-item>
      <el-form-item v-if="permission == 3" style="padding: 10px 0">
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
      </el-form-item>
		</el-form>
    <authority v-else></authority>
	</div>
</template>
<script>
import { getOtherSetting, saveOtherSetting } from '@/api/basicDatum'
import authority from '@/components/noneTemplate/authority.vue'
import { shopManage_basicDatum } from '@/utils/permission'
const postForm = {
  enableBindPhone: 1,
  enableBindPhoneInCourse: 1,
  enableBindPhoneInColumn: 1,
  enableBindPhoneInAll:1,
  enableBindPhoneInSocial: 1,
  enableBindPhoneInExam: 1,
  enableBindPhoneInDatum: 1,
  enableBindPhoneInActivity: 1,
}

export default {
  components: {
    authority
  },
  name: 'otherSetting',
  data() {
    return {
      permission: 3,
      authority: true,
      postForm: Object.assign({}, postForm),
      btnLoading: false,
      formLoading: false
    }
  },
  created() {
    this.getModelPermission()
    this.initData()
  },
  methods: {
    getModelPermission() {
      this.permission = shopManage_basicDatum()
    },
    initData() {
      getOtherSetting().then(res => {
        if (res.data.data) {
          this.postForm = res.data.data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          if (this.btnLoading) {
            return
          }
          this.btnLoading = true
          this.formLoading = true
          if(this.postForm.enableBindPhoneInAll == 0){
            this.postForm = {
              enableBindPhone: 0,
              enableBindPhoneInCourse: 0,
              enableBindPhoneInColumn: 0,
              enableBindPhoneInAll:0,
              enableBindPhoneInSocial: 0,
              enableBindPhoneInExam: 0,
              enableBindPhoneInDatum:0,
              enableBindPhoneInActivity: 0,
            }
          }
          saveOtherSetting(this.postForm).then(res => {
            this.btnLoading = false
            this.formLoading = false
            this.$message.success('保存成功')
          }).catch(err => {
          	this.btnLoading = false
            this.formLoading = false
            console.log(err)
          })
        } else {
          this.btnLoading = false
          this.formLoading = false
          console.log('error submit!')
          return false
        }
      })
    }
  }
}
</script>
<style>

</style>
